<template>
	<view class="home-window-content">
		<view class="home-chat">
			<z-window-header :curTitle="chatBodyList" :curSelectIndex="curSelectIndex" :fullScreen="fullScreen"
			                 :showSideBarButton="showSideBarButton"
			                 @editTitle="editTitle" @clickFullScreen="clickFullScreen"
			                 @clickSidebarPopup="clickSidebarPopup"/>
			<z-window-chat-body ref="windowChatBody" :key="componentKey" :chatBodyList="chatBodyList"
			                    :curSelectIndex="curSelectIndex"/>
			<z-window-input ref="windowInput" :chatBody="chatBodyList[curSelectIndex] ? chatBodyList[curSelectIndex] : {}"
			                @sendMessage="sendMessage"/>
		</view>
	</view>
</template>

<script>
export default {
	emits: ["editTitle", "clickFullScreen", "clickSidebarPopup", "sendMessage"],
	props: {
		fullScreen: {
			type: Boolean
		},
		showSideBarButton: {
			type: Boolean
		},
		chatBodyList: {
			type: Array
		},
		curSelectIndex: {
			type: Number,
			default: () => 0
		},
		componentKey: {
			type: Number,
			default: () => 0
		}
	},
	methods: {
		editTitle(newTitle) {
			this.$emit('editTitle', newTitle);
		},
		clickFullScreen(type) {
			this.$emit("clickFullScreen", type);
		},
		clickSidebarPopup(type) {
			this.$emit("clickSidebarPopup", type);
		},
		sendMessage(message) {
			this.$emit("sendMessage", message);
		},
		scrollToBottom(type) {
			this.$refs.windowChatBody.scrollToBottom(type);
		},
		clearInputText() {
			this.$refs.windowInput.clearInputText();
		},
		keyListener() {
			this.$refs.windowInput.keyListener();
		},
	}
}
</script>

<style lang="scss">

@import "../css/chat.scss";

.home-window-content {
	width: $window-content-width;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.home-chat {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
}

</style>